<div class="largecontainer">
	<div class="row gridrow">
		<div class="col s6 m6 l6">
			<div class="row">
				<div class="col s4">
					<form action="">
						<h1>
							NEW RULES
						</h1>
					</form>
				</div>
				<div class="input-field col s8">
					<ul materialize="collapsible" data-collapsible="accordion">
						<li>
							<div class="collapsible-header">Rule Creation help</div>
							<div class="collapsible-body">
								<blockquote>
									<p class="flowtext">
										Use "Time Delta" as a modifier for time crunching, for instance, supply a start date and
										time and pass in "5" as a delta to get a wrinkle time (-5m/+5m).
									</p>
								</blockquote>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<form [formGroup]="ruleForm" novalidate (ngSubmit)="submitRule(ruleForm.value, ruleForm.valid, $event)" materialize>
					<div class="col s6">
						<select materialize="material_select" 
						[materializeSelectOptions]="ruleTypes"
						(change)="ruleTypeInView($event.target.value)"
						formControlName="rule_type">
						<option value="" disabled selected>Rule Type</option>
						<option *ngFor="let option of ruleTypes" [value]="option.type">{{option.display}}</option>
					</select>
				</div>
				<div class="input-field col s6">
					<i class="material-icons prefix">comment</i>
					<input id="icon_prefix" type="text" class="validate" formControlName="rule_name">
					<label for="icon_prefix">Rule Name</label>				
				</div>
				<div class="row" *ngIf="inView == 'blacklist'">
					<div class="input-field col s6 m6 l6">
						<i class="material-icons prefix">toc</i>
						<input id="icon_prefix" type="text" class="validate" formControlName="compare_key">
						<label for="icon_prefix">Compare Key (comma seperated)</label>			
					</div>
					<div class="input-field col s6 m6 l6">
						<i class="material-icons prefix">error</i>
						<input id="icon_prefix" type="text" class="validate" formControlName="list_terms">
						<label for="icon_prefix">Blacklist Terms (comma seperated)</label>			
					</div>
					<div class="col s6 m6 l6">
						<select materialize="material_select" 
						[materializeSelectOptions]="realertDuration"
						(change)="getRealertDuration($event.target.value)"
						formControlName="realert_timelength">
						<option value="" disabled selected>Realert Duration</option>
						<option *ngFor="let option of realertDuration" [value]="option.length">{{option.display}}</option>
					</select>
				</div>
				<div class="input-field col s6 m6 l6">
					<input id="icon_prefix" type="number" class="validate" formControlName="realert_duration">
					<label for="icon_prefix">Duration</label>			
				</div>
			</div>
			<div class="row">
				<div class="col s12">
				<button class="btn waves-effect" type="submit" [disabled]="!ruleForm.valid || !ruleForm.dirty">Submit
					</button>
				</div>

			</div>
		</form>
	</div>
</div>
<div class="col s6 m6 l6">
	<div class="row">
		<form action="">
			<h1>
				EXISTING RULES
			</h1>
		</form>
	</div>
</div>
</div>
</div>